<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>

    <!-- 登录按钮 -->
    <button type="primary" class="btn-login" @click="fn">一键登录</button>

    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
/* 
  电商项目除非到最后一步 不然不需要登录  =>   用户体验上的设计
  咱们这个项目中 => 只有支付才需要登录

  小程序中普通的登录: 
    输入手机号 验证码 请求后端接口 换token回来 存下来

  小程序中一键登录(特殊的登录姿势 -> 用户无需输入任何内容 直接利用微信用户信息完成登录):
    注意事项 => 将来用户确实不需要输入手机号等其他信息了, 但是需要和微信拿用户资料(涉及到两个api)
    1. wx.getUserProfile()  可以获取用户资料 和 将来登录接口要用的4个参数
    2. wx.login()           可以获取登录凭证code(另一个参数)
    3. 请求后端接口(5个参数)   完成token的获取   !!! (公司中找领导开通项目成员 再和领导要一下公司的appid)
*/

export default {
  methods: {
    async fn() {
      // 1. 获取4个参数以及用户资料
      const { userInfo, iv, rawData, signature, encryptedData } =
        await uni.getUserProfile({
          desc: '我需要用户信息一键登录', // 必填参数
        })
      // console.log(res)
      this.$store.commit('user/updateUserInfo', userInfo)

      // 2. 获取code 最后一个参数
      // uni.login({
      //   success: ({code}) => {
      //     console.log(code)
      //   }
      // })
      const { code } = await uni.login()

      // 3. 请求接口 获取token
      const {meta, message} = await this.$http.post('/users/wxlogin', {
        iv,
        rawData,
        signature,
        encryptedData,
        code,
      })

      // console.log(res) // token???
      if(meta.status !== 200) return this.$msg()
      console.log(message.token)

      this.$store.commit('user/setToken', message.token)
    },
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 80rpx;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 200rpx;
    margin: 30rpx 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 24rpx;
    color: gray;
  }
}
</style>
